<template>
  <div>
    <van-search v-model="searchValue" placeholder="输入小区或地址" show-action>
      <template #left>
        <van-icon name="arrow-left" @click="$router.push('/home')"></van-icon>
      </template>
      <template #label>
        <div @click="$router.push('/city')">{{ city }}</div>
      </template>
      <template #action><van-icon name="location-o" size="20" /> </template>
    </van-search>

    <van-dropdown-menu active-color="#21b97a">
      <van-dropdown-item v-model="menuValue" title="区域">
        <van-picker
          v-if="flag"
          v-show="showFlag"
          show-toolbar
          :columns="columns1"
          toolbar-position="bottom"
          @confirm="confirmArea"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="menuValue" title="方式">
        <van-picker
          v-if="flag"
          v-show="showFlag"
          show-toolbar
          :columns="columns2"
          toolbar-position="bottom"
          @confirm="confirmMean"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="menuValue" title="租金">
        <van-picker
          v-if="flag"
          v-show="showFlag"
          show-toolbar
          :columns="columns3"
          toolbar-position="bottom"
          @confirm="confirmPrice"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <!-- 筛选弹窗 -->
      <van-cell is-link @click="showPopup">筛选 </van-cell>

      <van-popup
        v-model="show"
        position="right"
        :style="{ height: '100%', width: '80%' }"
      >
        <van-grid :gutter="15" column-num="2" border center>
          <div class="title">户型</div>
          <van-grid-item
            v-for="item in roomType"
            :key="item.value"
            :text="item.text"
            @click="clickRoom($event, item)"
          />
        </van-grid>

        <van-grid :gutter="15" column-num="2" border center>
          <div class="title">朝向</div>
          <van-grid-item
            v-for="item in oriented"
            :key="item.value"
            :text="item.text"
            @click="clickOriented($event, item)"
          />
        </van-grid>
        <van-grid :gutter="15" column-num="2" border center>
          <div class="title">楼层</div>
          <van-grid-item
            v-for="item in floor"
            :key="item.value"
            :text="item.text"
            @click="clickFloor($event, item)"
          />
        </van-grid>
        <div class="btn">
          <button @click="clearFloor">清除</button>
          <button @click="clickBtn">确定</button>
        </div>
      </van-popup>
    </van-dropdown-menu>
    <!-- 房屋渲染 -->
    <houseInfo
      v-for="item in houseList"
      :key="item.houseCode"
      :houseList="item"
    ></houseInfo>
  </div>
</template>

<script>
import { getToken, getOneToken } from '@/utils/storage'
import { houseCondition, getHouses } from '@/api/find'
import { Toast } from 'vant'

export default {
  name: 'find-page',
  async created() {
    const obj = JSON.parse(getToken() || getOneToken())
    this.query.cityId = obj.value
    this.city = obj.label
    const {
      data: { body }
    } = await houseCondition(obj.value)
    const newBody = JSON.parse(JSON.stringify(body).replace(/label/g, 'text'))
    console.log(newBody)
    const { area, price, subway, rentType, roomType, oriented, floor } = newBody
    this.columns1.push(area)
    this.columns1.push(subway)
    this.columns2 = rentType
    this.columns3 = price
    this.roomType = roomType
    this.oriented = oriented
    this.floor = floor
    const {
      data: {
        body: { list }
      }
    } = await getHouses(this.query)

    this.houseList = list
  },
  data() {
    return {
      searchValue: '',
      menuValue: 0,
      city: '',
      columns1: [
        // 第一列
        {
          text: '',
          // disabled: true,
          children: [
            {
              text: '',
              children: [{ text: '' }]
            }
          ]
        }
      ],
      columns2: [],
      columns3: [],
      show: false,
      roomType: [],
      oriented: [],
      floor: [],
      query: {
        cityId: '',
        area: '',
        subway: '',
        rentType: '',
        price: '',
        roomType: '',
        oriented: '',
        characteristic: '',
        floor: ''
      },
      houseList: [],
      flag: true,
      showFlag: true
    }
  },
  methods: {
    // 选择区域并渲染
    async confirmArea(value, index) {
      this.flag = !this.flag
      console.log(value, index)
      if (index[0] === 1 && index[1] === 0 && index[2] === 0) {
        return index[0]
      } else if (index[0] === 1 && index[1] !== 0 && index[2] === 0) {
        this.query.subway = ''
        this.query.area = this.columns1[1].children[index[1]].value
        const {
          data: {
            body: { list }
          }
        } = await getHouses(this.query)
        this.houseList = list
        this.flag = !this.flag
      } else if (index[0] === 1 && index[1] !== 0 && index[2] !== 0) {
        this.query.subway = ''
        this.query.area =
          this.columns1[1].children[index[1]].children[index[2]].value
        const {
          data: {
            body: { list }
          }
        } = await getHouses(this.query)
        this.houseList = list
        this.flag = !this.flag
      } else if (index[0] === 2 && index[1] === 0 && index[2] === 0) {
        return index[0]
      } else if (index[0] === 2 && index[1] !== 0 && index[2] === 0) {
        // 点击改变地铁并渲染
        this.query.area = ''
        this.query.subway = this.columns1[2].children[index[1]].value
        const {
          data: {
            body: { list }
          }
        } = await getHouses(this.query)
        this.houseList = list
        this.flag = !this.flag
      } else {
        this.query.area = ''
        this.query.subway =
          this.columns1[2].children[index[1]].children[index[2]].value
        const {
          data: {
            body: { list }
          }
        } = await getHouses(this.query)
        this.houseList = list
        this.flag = !this.flag
      }
    },
    // 选择方式
    async confirmMean(value, index) {
      this.flag = !this.flag
      this.query.rentType = this.columns2[index].value
      const {
        data: {
          body: { list }
        }
      } = await getHouses(this.query)
      this.houseList = list
      this.flag = !this.flag
    },
    // 选择租金
    async confirmPrice(value, index) {
      this.flag = !this.flag
      this.query.price = this.columns3[index].value
      const {
        data: {
          body: { list }
        }
      } = await getHouses(this.query)
      this.houseList = list
      this.flag = !this.flag
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel() {
      Toast('取消')
    },
    showPopup() {
      this.show = true
    },
    clickRoom(e, item) {
      e.target.style.backgroundColor = '#999'
      console.log(item.value)
      this.query.roomType = item.value
    },
    clickOriented(e, item) {
      e.target.style.backgroundColor = '#999'
      console.log(item.value)
      this.query.oriented = item.value
    },
    clickFloor(e, item) {
      e.target.style.backgroundColor = '#999'
      console.log(item.value)
      this.query.floor = item.value
    },
    async clickBtn() {
      this.show = false
      const {
        data: {
          body: { list }
        }
      } = await getHouses(this.query)
      this.houseList = list
    },
    clearFloor() {
      this.show = false
      this.query.floor = ''
      this.query.oriented = ''
      this.query.roomType = ''
    }
  }
}
</script>

<style scoped lang="less">
.van-search {
  width: 100%;
  background-color: #21b97a;
}
::v-deep .van-icon-arrow-left:before {
  content: '\e668';
  font-size: 20px;
  margin: 0 11px 0 -4px;
  color: white;
}
::v-deep .van-icon-location-o:before {
  color: white;
}
.van-grid {
  padding: 40px 45px;
  position: relative;
  border-bottom: 1px solid #999;
  .title {
    position: absolute;
    top: 13px;
    left: 10px;
  }
}
.van-dropdown-menu {
  position: relative;
  display: flex;
  justify-content: space-between;
  .van-cell--clickable {
    width: 25%;
    height: 100%;
    display: flex;
  }
}
::v-deep .van-dropdown-menu__bar {
  width: 75%;
}
::v-deep .van-icon-arrow:before {
  content: '';
}
.van-cell__value--alone {
  color: #323233;
  text-align: left;
  text-align: center;
  padding-top: 1px;
}
.van-popup {
  .btn {
    // position: absolute;
    // bottom: 0;
    // left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    button {
      width: 50%;
      color: #fff;
      &:nth-child(1) {
        color: #21b97a;
      }
      &:nth-child(2) {
        background-color: #21b97a;
      }
    }
  }
}
</style>
